<template>
  <div class="group-product">
    <ul class="list">
      <li v-for="(item, index) in list" :key="index" class="list-item" @click="handleClick(item)">
        <div class="image">
          <img v-lazy="item.mainImage.thumbnail_path" v-if="item.mainImage && item.mainImage.thumbnail_path" />
        </div>
        <div class="desc">
          <p class="title">
            <span class="icon" v-if="quantity > -1">{{ quantity }}人团</span>
            {{ item.title }}
          </p>
          <p class="price">
            <span class="new">拼团价 ￥{{ +item.price }}</span>
            <span class="old">￥{{ +item.price_old }}</span>
          </p>
          <p class="button">立即参团</p>
        </div>
      </li>
    </ul>
    <pull-up
      :loading="loading"
      :busy="queryList.busy"
      :data-len="list.length"
      @loadMore="loadMore" />
    <loading :show="loading" />
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
import Loading from '@/components/Loading'
import PullUp from '@/components/PullUp'
export default {
  name: 'GroupProduct',
  props: ['category', 'quantity'],
  components: {
    Loading,
    PullUp
  },
  data() {
    return {
      list: [],
      queryList: {},
      loading: false
    }
  },
  methods: {
    handleClick(item) {
      this.$router.push(`/product/detail/${item.id}`)
    },
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        api.Group.products({ ...this.queryList, category: this.category }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
    init() {
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.list = []
    }
  },
  created () {
    // this.getList()
  },
  activated () {
    this.init()
    this.getList()
  },
  deactivated () {
    this.queryList.busy = true
  },
  watch: {
    category(v) {
      this.init()
      this.getList()
    }
  }
}
</script>

<style scoped lang="stylus">
.group-product
  margin 0 10px
  //background red
  .list
    .list-item
      display flex
      background white
      margin 7.5px 0
      border-radius 5px
      padding 10px
      .image
        width 100px
        padding 5px
      .desc
        flex 1
        text-align left
        position relative
        margin-top 15px
        .title
          line-height 20px
          font-weight 700
          font-size 14px
          .icon
            background #f55812
            padding 2px 7px
            font-size 10px
            border-top-left-radius 7.5px
            border-bottom-right-radius 7.5px
            color white
        .price
          height 30px
          line-height 30px
          .new
            color $second_color
            font-weight 700
          .old
            margin-left 10px
            color #808080
            text-decoration line-through
        .button
          position absolute
          //background $main_color
          padding 7.5px 15px
          //height 25px
          //line-height 25px
          background-image url("../../home/images/group.png")
          background-repeat repeat-x
          background-size contain
          color white
          right 0
          bottom 0
          border-radius 15px
          letter-spacing 1.2px
          font-weight 500
</style>
